<template>
  <!-- 门店营业评估表 -->
  <div class="global-topList">
    <div class="top_wrap pt-16 pb-16 borderB-2">
      <span class="mr-8">店铺</span>
      <el-select
        class="update-el-select"
        v-model="requestData.directSaleNo"
        placeholder="请选择"
      >
        <el-option
          v-for="item in shopList"
          :key="item.id"
          :label="item.no + item.name"
          :value="item.no"
        >
        </el-option>
      </el-select>
      <span class="mr-8 pl-26">月份</span>
      <el-date-picker
        class="update-el-date"
        v-model="dateTime"
        type="month"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        format="yyyy-MM"
        value-format="yyyy-MM-dd"
        @change="changeDate"
      >
      </el-date-picker>
    </div>
    <div class="bottom_wrap pt-16">
      <el-button
        type="primary"
        icon="el-icon-search"
        @click="getShopOperationList"
        >查询</el-button
      >
      <div class="table_wrap pt-16">
        <div class="table_wrap pt-16">
          <el-table
            :data="shopOperationList"
            style="width: 100%"
            :header-cell-style="{
              background: '#f4f4f4',
              padding: 0,
              height: '40px'
            }"
            :cell-style="{ padding: 0, height: '26px' }"
            highlight-current-row
            border
            height="68vh"
          >
            <el-table-column prop="month" label="月份"> </el-table-column>
            <el-table-column prop="storeName" label="店铺名称">
            </el-table-column>
            <el-table-column prop="salesVolume" label="销售数量">
            </el-table-column>
            <el-table-column prop="salesAmount" label="销售金额">
            </el-table-column>
            <el-table-column prop="performanceTargets" label="业绩目标">
            </el-table-column>
            <el-table-column
              prop="performanceCompletionRate"
              label="业绩完成率"
              width="120px"
            >
            </el-table-column>
            <el-table-column
              prop="sellOutRateOfMainPush"
              label="主推款售罄率"
              width="120px"
            >
            </el-table-column>
            <el-table-column prop="soldOutRate" label="售罄率">
            </el-table-column>
            <el-table-column prop="dynamicPinRatio" label="款销比">
            </el-table-column>
            <el-table-column prop="associateRate" label="连带率">
            </el-table-column>
            <el-table-column prop="customerPrice" label="客单价">
            </el-table-column>
            <el-table-column
              prop="vipRecruitmentCompletionRate"
              label="VIP招募完成率"
              width="120px"
            >
            </el-table-column>
            <el-table-column
              prop="vipSalesContributionRate"
              label="VIP销售贡献率"
              width="120px"
            >
            </el-table-column>
            <el-table-column prop="averageDiscount" label="折扣">
            </el-table-column>
            <el-table-column prop="humanEffect" label="人效"> </el-table-column>
            <el-table-column prop="pingEffect" label="评效"> </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getShopOperationList,
  getAllDirectStoreInfo
} from '@/request/store/K_StoreAssessment'
import {
  getCurrentMonthLast,
  changeDate,
  parseTime,
  endOfMonth
} from '@/util/util'
export default {
  name: 'K_StoreOperations',
  data() {
    return {
      requestData: {
        directSaleNo: '',
        startTime: '',
        endTime: ''
      },
      shopList: [],
      shopOperationList: [],
      dateTime: ''
    }
  },
  created() {
    this.getAllDirectStoreInfo()
  },
  methods: {
    // 查询
    async getShopOperationList() {
      const { data } = await getShopOperationList(this.requestData)
      if (data && data.code === 200) {
        this.shopOperationList = data.data
        console.log(this.shopOperationList, '查询')
      }
    },
    // 获取直营店
    async getAllDirectStoreInfo() {
      const { data } = await getAllDirectStoreInfo()
      if (data && data.code === 200) {
        this.shopList = data.data
      }
    },
    changeDate(date) {
      if (date) {
        let year = date && date.split('-')[0]
        let month = date && date.split('-')[1]
        let endMonth = endOfMonth(year, month) // 获取本月最后一天
        let endTime = `${year}-${month}-${endMonth} 23:59:59`
        this.requestData.startTime = `${date} 00:00:00`
        this.requestData.endTime = endTime
      } else {
        this.requestData.startTime = ''
        this.requestData.endTime = ''
      }
    }
  }
}
</script>

<style lang="less" scoped></style>
